<template>
  <view>五星评分组件</view>
  <Starts :num="3" :size="16" @getStarNum="getStarNum"></Starts>
  <view>放大镜组件</view>
  <view class="wrapper">
    <Magnifier
      :link="link"
      :blank="blank"
      :imgUrl="imgUrl"
      :imgAlt="imgAlt"
      :imgWidth="imgWidth"
      :imgHeight="imgHeight"
      :magWidth="magWidth"
      :magHeight="magHeight"
    ></Magnifier>
  </view>
</template>

<script lang="ts">
import {reactive, toRefs} from "vue";
import Starts from './Stars.vue'
import Magnifier from './Magnifier.vue'

export default {
  name: 'staff',
  setup() {
    const getStarNum = (starNum: Number) => {
      /*做一些业务处理*/
      console.log('>>>>>', starNum)
    }

    const state = reactive({
      link: 'https://www.baidu.com',
      blank: false,
      imgUrl: 'https://img2.baidu.com/it/u=1917061783,3208583419&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
      imgAlt: '-----',
      imgWidth: 375,
      imgHeight: 481,
      magWidth: 100,
      magHeight: 100
    })
    return {
      getStarNum,
      ...toRefs(state)
    }
  },
  components: {
    Starts,
    Magnifier
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  width: 375px; // 481
  margin: 100px auto;
}
</style>